<template>
  <div id="big-data-container" class="big-data-container">
    <div class="head">
      <h1>整车全流程营运枢纽</h1>
    </div>
    <div class="data-container">
      <div class="data-left">
        <div class="data-left-item">
          <div class="title">整车订单生产情况</div>
          <div id="chart-vleft-1" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-left-item">
          <div class="title">各通道开票情况</div>
          <div id="chart-vleft-invoice" style="height: calc(100% - 30px)"></div>
          <!-- <div class="data-foot-line"></div> -->
        </div>
      </div>
      <div class="data-center">
        <div class="center-top-num">
          <div class="item">
            <div class="text">总销售额(万元)</div>
            <div class="num">{{ totalsalesnum }}</div>
          </div>
          <div class="item">
            <div class="text">总订单量(台)</div>
            <div class="num">{{ totalordernum }}</div>
          </div>
          <div class="data-foot-line"></div>
        </div>
        <div class="center-top">
          <el-carousel height="290px" type="card" :autoplay="true">
            <el-carousel-item>
              <div>
                <div class="title">接单台数</div>
                <div id="chart-vleft-3" style="height:200px;"></div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div>
                <div class="title">接单实销</div>
                <div id="chart-vleft-4" style="height:200px;"></div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div>
                <div class="title">整车订单销售情况</div>
                <div id="chart-vleft-5" style="height:200px;"></div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="title">实销数量（按月）</div>
        <div id="chart-vcenter" style="height:400px;" class="chart-vcenter"></div>
        <div class="data-foot-line"></div>
      </div>
      <div class="data-right">
        <div class="data-right-item">
          <div class="title">各通道回款情况</div>
          <div id="chart-vright-paymentback" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item">
          <div class="title">返利情况（万元）</div>
          <div id="chart-vright-rebate" style="height: calc(100% - 30px)"></div>
          <!-- <div class="data-foot-line"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");
let $chartLeft1,
  $chartInvoice,
  $chartLeft3,
  $chartLeft4,
  $chartLeft5,
  $chartCenter,
  $chartPaymentback,
  $chartRebate
// $serieList
import {
  chartLeft1,//整车订单生产情况
  pieInvoice,//整车订单销售情况
  chartLeft3,// 接单台数
  chartRight2,//实销数量（按月）表
  // serieList,
  // pieChart1,
  piePaymentback,
  lineRebate
} from "./wholeVehicle";
import "./wholeVehicle.less";
import http from "@/api/http.js";
export default {
  components: {
  },
  data() {
    return {
      totalordernum: 0,
      totalsalesnum: 0,
      length: 0
    };
  },
  created() {
    console.log("chart");
  },
  methods: {
    // 进入直接加载程序
    // 加载总销售额及总订单量
    getTotal(month, year) {
      console.log("month:" + month);
      let url = "api/wholeVehicleScreen/getTotal?year=" + year;
      http.post(url, {}, true).then((s) => {
        s.totalSalesNumList.forEach((e) => {
          this.totalsalesnum = (e.totalsalesnum / 10000).toFixed(2);
        });
        s.totalOrderNumList.forEach((e) => {
          this.totalordernum = e.totalordernum;
        });
      });
    },
    //整车订单销售情况
    getWholeVehicleProd(month, year) {
      console.log("month:" + month);
      let url = "api/wholeVehicleScreen/getWholeVehicleProd?month=" + month + "&year=" + year;
      http.post(url, {}, true).then((s) => {
        // 线上数据
        var mapMonthData = new Array();
        // 线上名称
        var mapYearData = new Array();
        s.wholeVehicleMonthOrderList.forEach((e) => {
          mapMonthData.push(e.wholevehiclemonthorder);
        });
        s.wholeVehicleYearOrderList.forEach((e) => {
          mapYearData.push(e.wholevehicleyearorder);
        });
        s.wholeVehicleMonthProdList.forEach((e) => {
          mapMonthData.push(e.wholevehiclemonthprod);
        });
        s.wholeVehicleYearProdList.forEach((e) => {
          mapYearData.push(e.wholevehicleyearprod);
        });
        s.wholeVehicleProdMonthOfflineList.forEach((e) => {
          mapMonthData.push(e.wholevehicleprodmonthoffline);
        });
        s.wholeVehicleProdYearOffLIineList.forEach((e) => {
          mapYearData.push(e.wholevehicleprodyearoffliine);
        });
        s.wholeVehicleProdMonthStartCarList.forEach((e) => {
          mapMonthData.push(e.wholeVehicleProdMonthStartCar);
        });
        s.wholeVehicleProdYearStartCarList.forEach((e) => {
          mapYearData.push(e.wholeVehicleProdYearStartCar);
        })
        chartLeft1.series[0].data.push(...mapYearData);
        chartLeft1.series[1].data.push(...mapMonthData);

        $chartLeft1 = echarts.init(document.getElementById("chart-vleft-1")); //科目预算分类统计
        $chartLeft1.setOption(chartLeft1, true);
        $chartLeft5 = echarts.init(document.getElementById("chart-vleft-5")); //科目预算分类统计
        $chartLeft5.setOption(chartLeft1, true);
      });
    },

    //发票信息
    getInvoiceData() {
      let url = "api/wholeVehicleScreen/getInvoiceData";
      http.post(url, {}, true).then((s) => {
        //线上数据
        var mapData = new Array();
        //线上名称
        var mapNameData = new Array();
        s.invoiceSqlList.forEach((e) => {
          mapNameData.push(e);
        });
        s.invoiceSqlList.forEach((e) => {
          mapData.push(e.name);
        });
        pieInvoice.series[0].data.push(...mapNameData);
        $chartInvoice = echarts.init(document.getElementById("chart-vleft-invoice"));
        $chartInvoice.setOption(pieInvoice, true);
      });
      $chartInvoice = echarts.init(document.getElementById("chart-vleft-invoice"));
      $chartInvoice.setOption(pieInvoice, true);
    },

    //接单实销
    getActualSalesData() {
      let url = "api/wholeVehicleScreen/getActualSalesData";
      http.post(url, {}, true).then((s) => {
        // 线上数据
        var mapXData = new Array();
        // 线上名称
        var mapXNameData = new Array();
        s.lastYearSqlList.forEach((e) => {
          mapXNameData.push(e.dat);
        });
        s.lastYearSqlList.forEach((e) => {
          mapXData.push(e.numr);
        });
        $chartCenter = echarts.init(document.getElementById("chart-vcenter"));
        chartRight2.series[0].data.push(...mapXData);
        chartRight2.xAxis[0].data.push(...mapXNameData);
        $chartCenter.setOption(chartRight2, true);

        $chartLeft4 = echarts.init(document.getElementById("chart-vleft-4")); //科目预算分类统计
        $chartLeft4.setOption(chartRight2, true);
      });
    },

    //接单台数
    getReceiveOrderData() {
      let url = "api/wholeVehicleScreen/getReceiveOrderData";
      http.post(url, {}, true).then((s) => {
        // 线上数据
        var mapXData = new Array();
        // 线上名称
        var mapXNameData = new Array();
        // 线上名称
        var mapLegendData = new Array();
        var mapXaxisData = new Array();

        s.lastYearSqlList.forEach((e) => {
          mapXaxisData.push(e.dat);
        });
        s.lastYearSqlList.forEach((e) => {
          mapXData.push(e.numl);
        });
        s.lastYearSqlList.forEach((e) => {
          mapLegendData.push(e.year);
        });
        s.newYearSqlList.forEach((e) => {
          mapXaxisData.push(e.dat);
        });
        s.newYearSqlList.forEach((e) => {
          mapXNameData.push(e.numl);
        });
        s.newYearSqlList.forEach((e) => {
          mapLegendData.push(e.year);
        });
        mapLegendData = Array.from(new Set(mapLegendData));
        mapXaxisData = Array.from(new Set(mapXaxisData));
        $chartLeft3 = echarts.init(document.getElementById("chart-vleft-3")); //科目预算分类统计
        chartLeft3.series[0].data.push(...mapXData);
        chartLeft3.series[1].data.push(...mapXNameData);
        chartLeft3.xAxis[0].data.push(...mapXaxisData);
        chartLeft3.legend.data.push(...mapLegendData);
        $chartLeft3.setOption(chartLeft3, true);
      });
    },

    //回款管理
    getPaymentBackData() {
      let url = "api/wholeVehicleScreen/getPaymentbackData";
      http.post(url, {}, true).then((s) => {
        //线上数据
        var mapData = new Array();
        //线上名称
        var mapNameData = new Array();
        console.log(s);
        s.paymentbackSqlList.forEach((e)=>{
          if (e.name==null){
            e.name="未确认";
          }
        })
        s.paymentbackSqlList.forEach((e) => {
          mapNameData.push(e);
          mapData.push(e.name)
        });
        piePaymentback.series[0].data.push(...mapNameData);
        $chartPaymentback = echarts.init(document.getElementById("chart-vright-paymentback"));
        $chartPaymentback.setOption(piePaymentback, true);
      });
    },

    //返利管理
    getRebateData() {
      let url = "api/wholeVehicleScreen/getRebateData";
      http.post(url, {}, true).then((s) => {
        //线上数据
        var mapXData_1 = new Array();
        //线上名称
        var mapXData_2 = new Array();
        //线上名称
        var mapXaxisData = new Array();
        s.rebateCashSqlList.forEach((e) => {
          mapXaxisData.push(e.month);
        });
        s.rebateCashSqlList.forEach((e) => {
          mapXData_1.push(e.money);
        });
        s.rebateUseSqlList.forEach((e) => {
          mapXaxisData.push(e.month);
        });
        s.rebateUseSqlList.forEach((e) => {
          mapXData_2.push(e.money);
        });
        mapXaxisData = Array.from(new Set(mapXaxisData));
        lineRebate.series[0].data.push(...mapXData_1);
        lineRebate.series[1].data.push(...mapXData_2);
        lineRebate.xAxis[0].data.push(...mapXaxisData);
        $chartRebate = echarts.init(document.getElementById("chart-vright-rebate"));
        $chartRebate.setOption(lineRebate, true);
      });
    },
  },
  mounted() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = year + month;
    // 加载总销售额及总订单量
    this.getTotal(currentdate, year);
    //整车订单生产情况
    this.getWholeVehicleProd(currentdate, year);
    // 各通道开票情况
    this.getInvoiceData();
    // 
    this.getActualSalesData();
    // 今、去年接单台数
    this.getReceiveOrderData();
    //各部门回款情况
    this.getPaymentBackData();
    //返利情况
    this.getRebateData();
    //五分钟自动刷新一次页面
    setInterval(() => {
      window.location.reload()
    }, 300000);
  },
  destroyed() {
  },
};
</script>
<style scoped>
.right-3 {
  display: flex;
  flex-direction: column;
  /* margin-top: 20px; */
}

.right-3 .right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-3 .item {
  text-align: left;
  border-bottom: 1px solid #549069;
  flex: 1;
  display: flex;
  padding: 5px 10px;
  margin: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.right-3 .item:last-child {
  border-bottom: 0;
}

.right-3 .item>div {
  color: white;
}

.right-3 .top {
  width: 60px;
  position: relative;
}

.right-3 .top span {
  position: absolute;
  width: 20px;
  line-height: 20px;
  top: 5px;
  text-align: center;
  border-radius: 5px;
}

.right-3 .top-1 span {
  background: #e80d0d;
}

.right-3 .top-2 span {
  background: #00c935;
}

.right-3 .top-3 span {
  background: #0083f4;
}

.right-3 .num {
  width: 88px;
}

.right-3 .pro-name {
  flex: 1;
}

.el-carousel__item h3 {
  /* color: #475669; */
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #1400a8;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #1400a8;
}
</style>